<template>
    <div class="novel">
      <div class="header">
      <div class="containor">
        <!-- 点击行学天下时，跳转至首页，使用$router.go(-1) -->
        <div class="name" @click="$router.go(-1)">
          <img
            src="../assets/hhxy.png"
            alt="图片丢失"
            width="360px"
            height="80px"
          />
          </div>
        <div class="telephone">
          <img
            src="../assets/telephone.png"
            alt="图片丢失"
            width="25px"
            height="25px"
          />
          <router-link to="/contact us">联系我们</router-link>
        </div>
      </div>
    </div>
    <h1 align="center">榜单</h1>
        <div class="test">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center"><img src="http://img3m9.ddimg.cn/71/33/28992419-1_l_45.jpg" alt="蛤蟆先生去看心理医生（年销200万册！英国经典心理咨询入门书，知名心理学家李松蔚强烈推荐）"></td>
    <td align="center"><img src="http://img3m8.ddimg.cn/34/15/26510848-1_l_6.jpg" alt="走遍中国 图说天下 寻梦之旅"></td>
    <td align="center"><img src="http://img3m0.ddimg.cn/39/18/29246520-1_l_30.jpg" alt="张文鹤护肤指南（皮肤科专家张文鹤20年临床经验总结一本守护全家人的皮肤健康书！）"></td>
    <td align="center"><img src="http://img3m5.ddimg.cn/51/34/26921715-1_l_8.jpg" alt="人生海海（麦家重磅力作，莫言、董卿盛赞，连续两年高居畅销榜，发行量超200万册）"></td>   
  </tr>

  <tr>

    <td align="center">
    <h1>蛤蟆先生去看心理医生</h1>
    <el-collapse v-model="activeNames" @change="handleChange">
  <div>
  <h2>优惠价：38.80</h2>
  </div>
  </el-collapse>
  </td>

    <td align="center">
    <h1>走遍中国 图说天下 寻梦之旅</h1>
    <el-collapse v-model="activeNames" @change="handleChange">
  <div>
    <h2>优惠价：26.80</h2>
  </div>
  </el-collapse>
  </td>

    <td align="center">
      <h1>张文鹤护肤指南</h1>
      <el-collapse v-model="activeNames" @change="handleChange">
<div>
  <h2>优惠价：29.90</h2>
</div> 
  </el-collapse>
  </td>

   <td align="center">
     <h1>人生海海</h1>
   <el-collapse v-model="activeNames" @change="handleChange"> 
<div>
  <h2>优惠价：69.80</h2>
</div>
  </el-collapse>
  </td>

  </tr>

</table>
        </div> 
        <el-divider>

        </el-divider>
         <div class="test">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">

  <tr>
    <td align="center"><img src="http://img3m6.ddimg.cn/83/20/25138856-1_l_6.jpg" alt="马尔克斯：百年孤独（50周年纪念版）"></td>
    <td align="center"><img src="http://img3m0.ddimg.cn/26/10/29196710-1_l_21.jpg" alt="这世界很烦，但你要很可爱（只要你可爱，这个世界也会变得可爱）"></td>
    <td align="center"><img src="http://img3m1.ddimg.cn/80/1/23778791-1_l_27.jpg" alt="少年读史记（套装全5册）"></td>
    <td align="center"><img src="http://img3m4.ddimg.cn/25/30/27869614-1_l_11.jpg" alt="世界尽头的咖啡馆（做决定前读一遍，少走弯路！美国57所高校指定研讨读物）"></td>  
  </tr>
  <tr>

    <td align="center">
      <h1>马尔克斯：百年孤独</h1>
    <el-collapse v-model="activeNames" @change="handleChange">
<div>
  <h2>优惠价：42.20</h2>
</div>
  </el-collapse>
  </td>

    <td align="center">
      <h1>这世界很烦，但你要很可爱</h1>
    <el-collapse v-model="activeNames" @change="handleChange">
<div>
  <h2>优惠价：55.50</h2>
</div>
  </el-collapse>
  </td>

    <td align="center">
      <h1>少年读史记</h1>
    <el-collapse v-model="activeNames" @change="handleChange">
<div>
  <h2>优惠价：69.90</h2>
</div>
  </el-collapse>
  </td>

   <td align="center">
     <h1>世界尽头的咖啡馆</h1>
   <el-collapse v-model="activeNames" @change="handleChange">
<div>
  <h2>优惠价：74.60</h2>
</div>
  </el-collapse>
  </td>

  </tr>
</table>

</div>
</div>
</template>

<script>
import { get } from "@/utils/request.js";
export default {
  data() {
    return {
         categories: [],
    };
    },
    methods: {
    // 查询所有栏目信息
    findAllCategories() {
      // 使用axios封装的get方法，发送ajax请求，拿到所有的栏目数据
      get("/index/category/findAll").then((res) => {
        // 将后台接口响应的数据，设置到组件的数据模型中
        this.categories = res.data;
      });
    },
    },
    created() {
    // 调用查询所有栏目信息的方法
    this.findAllCategories();
    },
};
</script>
<style scoped>
.header {
  /* display: flex; */
  height: 80px;
  font-family: "微软雅黑";
  box-shadow: 0 0 5px 5px rgba(153, 153, 153, 0.329);
}
.containor {
  width: 90%;
  margin: 0 auto;
  height: 80px;
}
/* 为因为子元素浮动产生高度塌陷的父元素清除浮动 => 使用伪元素来清除浮动 */
.containor::after {
  display: block;
  clear: both;
  content: "";
}
.name {
  float: left;
  font-size: 22px;
  font-weight: bold;
  color: #555;
  height: 80px;
  line-height: 80px;
  cursor: pointer;
}
.category {
  float: left;
  display: flex;
  margin: 0;
  padding: 0 1em;
  height: 80px;
  line-height: 80px;
  font-size: 18px;
  color: #666;
}
.category > li {
  padding: 0 16px;
  cursor: pointer;
}
.telephone {
  float: right;
  height: 80px;
  line-height: 80px;
  font-size: 18px;
  font-weight: bold;
  color: #888;
  cursor: pointer;
}
.telephone > img {
  position: relative;
  top: 5px;
  margin-right: 10px;
}
.xs{
 cursor: pointer;   
}
a {
    text-decoration: none;
    color: rgb(107, 105, 105);
  }
</style>